<template>
    <div class="box">
        <div v-if="questionItem.questionType == 1" class="item">
            <div>
                    <p>{{ index }}{{ getType(questionItem.questionType)}}</p>
                    <p class="question-item" v-html="questionItem.questionName"></p>
                    ({{questionItem.questionScore}} 分)
                <!-- <p>{{ index }}({{ getType(questionItem.questionType)}}) {{ questionItem.questionName}}</p>  -->
            </div>
            <div>
                <el-radio-group v-model="answerItem.answer" @change="answerItem.completed=true">
                    <p><el-radio label="A">A：<p class="answer-item" v-html="questionItem.answerA"></p></el-radio></p>
                    <p><el-radio label="B">B：<p class="answer-item" v-html="questionItem.answerB"></p></el-radio></p>
                    <p><el-radio label="C">C：<p class="answer-item" v-html="questionItem.answerC"></p></el-radio></p>
                    <p><el-radio label="D">D：<p class="answer-item" v-html="questionItem.answerD"></p></el-radio></p>
                </el-radio-group>
            </div>
        </div>
        <div v-if="questionItem.questionType == 2" class="item" >
            <div>
                    <p>{{ index }}{{ getType(questionItem.questionType)}}</p>
                    <p class="question-item" v-html="questionItem.questionName"></p>
                    ({{questionItem.questionScore}} 分)
                <!-- <p>{{ index }}({{ getType(questionItem.questionType)}}) {{ questionItem.questionName}} 
                ({{questionItem.questionScore}} 分)</p> -->
            </div>
            <div>
                <el-checkbox-group v-model="answerItem.answerList" @change="answerItem.completed=true">
                    <p><el-checkbox label="A">A：<p class="answer-item" v-html="questionItem.answerA"></p></el-checkbox></p>
                    <p><el-checkbox label="B">B：<p class="answer-item" v-html="questionItem.answerB"></p></el-checkbox></p>
                    <p><el-checkbox label="C">C：<p class="answer-item" v-html="questionItem.answerC"></p></el-checkbox></p>
                    <p><el-checkbox label="D">D：<p class="answer-item" v-html="questionItem.answerD"></p></el-checkbox></p>
                </el-checkbox-group>
            </div>
        </div>
        <div v-if="questionItem.questionType == 3" class="item">
            <div>
                    <p>{{ index }}{{ getType(questionItem.questionType)}}</p>
                    <p class="question-item" v-html="questionItem.questionName"></p>
                    ({{questionItem.questionScore}} 分)
                <!-- <p>{{ index }}({{ getType(questionItem.questionType)}}) {{ questionItem.questionName}} 
                ({{questionItem.questionScore}} 分)</p> -->
            </div>
                <div>
                <el-radio-group v-model="answerItem.answer" @change="answerItem.completed=true">
                    <p class="single-item"><el-radio label="是">A：正确</el-radio></p>
                    <p class="single-item"><el-radio label="否">B：错误</el-radio></p>
                </el-radio-group>
            </div>
        </div>
        <div v-if="questionItem.questionType == 4" class="item">
            <div>
                    <p>{{ index }}{{ getType(questionItem.questionType)}}</p>
                    <p class="question-item" v-html="questionItem.questionName"></p>
                    ({{questionItem.questionScore}} 分)
                <!-- <p>{{ index }}({{ getType(questionItem.questionType)}}) {{ questionItem.questionName}} 
                ({{questionItem.questionScore}} 分)</p> -->
            </div>
                <!-- 组件传值两层不生效？？？？？ -->
                <!-- <MyTinymce :content.sync="answerItem.answer" :height="300" /> -->
                <vue-tinymce
                    v-model="answerItem.answer" 
                    :setting="setting" />
                <!-- <el-input
                    @change="answerItem.completed=true"
                    v-model="answerItem.answer"
                    type="textarea"
                    resize="none"
                    :rows="6"
                    placeholder="请输入内容">
                </el-input> -->
        </div>
    </div>
</template>
<script>
import MyTinymce from '@/components/richText/Tinymce.vue'
export default {
    name:'QuestionEdit',
    components:{
        MyTinymce
    },
    props:{
        questionItem:{
            type:Object
        },
        index:{
            type:String
        },
        answerItem:{
            type:Object,
            default: function () {
                return { id: null, answer: '', answerList: [] }
            }
        }
    },
    data(){
        return{
            questionEnum:[
                {key:1,value:"单选题"},
                {key:2,value:"多选题"},
                {key:3,value:"判断题"},
                {key:4,value:"简答题"}
            ],
            setting: {
                menubar: false,
                elementpath: false,
                toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | numlist bullist  | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | kityformula-editor",
                // toolbar_drawer: "sliding",
                quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                plugins: "lists fullscreen quickbars kityformula-editor",
                language: 'zh_CN',
                height: 300,
                resize:false,
	        }
        }
    },
    methods:{
        getType(val){
            let name = "";
            this.questionEnum.forEach(el=>{
                if(el.key == val){
                    name = el.value;
                    return;
                }
            })
            return name;
        },
        richChange(){
            console.log('改变被调用');
        }
    }
}
</script>

<style  scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .box{
        background: white;
    }
    .item{
        text-align: left;
        margin-left: 20px;
        padding-top: 20px;
    }
    /* p{
        padding:15px 15px;
    } */
    .single-item{
        padding: 15px;
    }
    .answer-item{
        display: inline-block;
    }
    .question-item{
        display: inline-block;
    }
</style>